<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="病区" name="first">
        <div >
        <div v-for="dict in QueryAll"
             :key="dict.id"
             :label="dict.name"
             :value="dict.id"
             class="text item">
            <el-button style="width: 200px;height:180px "  type="primary" @click="drawer1(dict.name)" >{{dict.name}}</el-button>
        </div>


      </div>
      </el-tab-pane>

      <el-tab-pane label="病房" name="second">
        <div >
        <div v-for="dict in a"  :key="dict.id" :label="dict.name" :value="dict.id" class="text item">
              <el-button style="width: 200px;height:180px "  type="primary" @click="drawer2(dict.id)" >{{dict.name}}</el-button>
        </div>
        <hr>
      </div>
      </el-tab-pane>

      <el-tab-pane label="床位" name="third">
        <div >
        <div v-for="dict in b"  key="dict.value" :label="dict.label" :value="dict.value" class="text item">
         <div>
          <el-button style="width: 200px;height:180px "  type="primary" @click="drawer3(dict.id)" >{{dict.name}}</el-button>
        </div>
        </div>
        <hr>
      </div>

      </el-tab-pane>


      <el-tab-pane label="患者" name="fourth">
<!--        <div >-->
<!--          <div v-for="dict in c"  key="dict.value" :label="dict.label" :value="dict.value" class="text item">-->
<!--          <div>-->
<!--            <el-button style="width: 200px;height:180px "  type="primary">{{dict.personid}}</el-button>-->
<!--          </div>-->
<!--        </div>-->
<!--        <hr>-->
<!--      </div>-->
        <el-table v-loading="loading" :data="c" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="患者id" align="center" prop="personid" />
          <el-table-column label="主治医生id" align="center" prop="doctorid" />
          <el-table-column label="床位id" align="center" prop="bedid" />


        </el-table>
      </el-tab-pane>

    </el-tabs>









    <el-table v-loading="loading" :data="sickroomList" @selection-change="handleSelectionChange">

    </el-table>


  </div>
</template>

<style>
.text {
  font-size: 24px;
}

.item {
  padding: 18px 0;
}

.box-card {
  background-color: #00afff;
  width: 100px;
  height: 80px;
}
</style>

<script>
import { listSickroom, getSickroom, delSickroom, addSickroom, updateSickroom,aSickroom } from "@/api/be/sickroom";
import {listArea} from "@/api/be/area";
import { listBed } from "@/api/be/bed";
import {aBed} from "@/api/be/bed";
import {aSplitbed} from "@/api/be/splitbed";

import { listSplitbed, getSplitbed, delSplitbed, addSplitbed, updateSplitbed } from "@/api/be/splitbed";
export default {
  name: "Sickroom",
  dicts: ['sickroom_status2', 'sickroom_status3', 'sickroom_status'],

  data() {
    return {
  activeName: 'first',
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      drawer: false,
      // 非多个禁用
      multiple: true,
      // 非多个禁用
      a:[],
      b:[],
      c:[],
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      //病房
      name:"",

      // 病房记录表格数据
      sickroomList: [],
      //病区
      QueryAll:[],
      // 弹出层标题
      title: "",
      // 是否显示弹出层

      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,

      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {

      }
    };
  },
  created() {
    this.getList();
    this.getList1();
    this.getQuery()
    this.getSick()
    this.getListBed()
  },
  methods: {
    // /** 查询病房记录列表 */
    getList() {
      this.loading = true;
      listSickroom(this.queryParams).then(response => {
        this.sickroomList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 查询分床记录列表 */
    getList1() {
      this.loading = true;
      listSplitbed(this.queryParams).then(response => {

        this.splitbedList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    getListBed(){
      listBed().then(response=>{
        this.gname = response.rows;
      })
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },

    getSick(){
      listSickroom().then(response=>{
        this.name = response.rows;
      })
    },
    //病区
    getQuery(){
      listArea().then(response=>{
        this.QueryAll = response.rows;
      })
    },
    drawer1(name){
     this.activeName= 'second'

      aSickroom(name).then(response=>{
        this.a=response.data;
      })
    },
    drawer2(id){
      this.activeName= 'third'

      aBed(id).then(response=>{

        this.b=response.data;
      })
    },
    drawer3(id){
      this.activeName= "fourth"

      aSplitbed(id).then(response=>{
        console.log(response.data)
        this.c=response.data;



      })
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        sname: null,
        name: null,
        unit: null,
        attribute: null,
        remark: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加病房记录";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getSickroom(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改病房记录";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateSickroom(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addSickroom(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除病房记录编号为"' + ids + '"的数据项？').then(function() {
        return delSickroom(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('hospitals/sickroom/export', {
        ...this.queryParams
      }, `sickroom_${new Date().getTime()}.xlsx`)
    }
  }
};

</script>
